<template>
  <el-row type="flex" justify="center">
    <el-col
        v-for="data in tableData"
        :key="data"
        :span="8"
    >
      <el-card :body-style="{ padding: '0px' }">
        <!--        v-show 决定哪张图片出现-->
        <img
            v-show="buyButtonFlag"
            :src="'data:image/png;base64,'+data.imgurl"
            class="image"
        />
        <img
            v-show="!buyButtonFlag"
            :src="'data:image/png;base64,'+data.imgurl"
            style="-webkit-filter: grayscale(100%);filter: grayscale(100%);"
            class="image"
        />
        <div style="padding: 14px">
          <span>{{ data.name }}</span>
          <div class="bottom card-header">
            <div class="time">{{ currentDate }}</div>
            <el-button backgroud=" #d1edc4" text class="button" @click="dialogFormVisible = true"
                       v-show="buyButtonFlag">购买
            </el-button>
            <el-button color=" #d1edc4" text class="button" @click="dialogFormVisible = true" v-show="!buyButtonFlag"
                       disabled>购买
            </el-button>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>


  <!--  <el-space direction="vertical" alignment="flex-start">-->
  <!--    <div>-->
  <!--      <label style="margin-right: 16px">Switch Loading</label>-->
  <!--      <el-switch v-model="loading" />-->
  <!--    </div>-->
  <!--    <el-skeleton style="width: 240px" :loading="loading" animated>-->
  <!--      <template #template>-->
  <!--        <el-skeleton-item variant="image" style="width: 240px; height: 240px" />-->
  <!--        <div style="padding: 14px">-->
  <!--          <el-skeleton-item variant="h3" style="width: 50%" />-->
  <!--          <div-->
  <!--              style="-->
  <!--              display: flex;-->
  <!--              align-items: center;-->
  <!--              justify-items: space-between;-->
  <!--              margin-top: 16px;-->
  <!--              height: 16px;-->
  <!--            "-->
  <!--          >-->
  <!--            <el-skeleton-item variant="text" style="margin-right: 16px" />-->
  <!--            <el-skeleton-item variant="text" style="width: 30%" />-->
  <!--          </div>-->
  <!--        </div>-->
  <!--      </template>-->
  <!--      <template #default>-->
  <!--        <el-card :body-style="{ padding: '0px', marginBottom: '1px' }">-->
  <!--&lt;!&ndash;          v-show 决定哪张图片出现&ndash;&gt;-->
  <!--          <img-->
  <!--              v-show="buyButtonFlag"-->
  <!--              :src= "tableData[0].imgurl"-->
  <!--              class="image"-->
  <!--          />-->
  <!--          <img-->
  <!--              v-show="!buyButtonFlag"-->
  <!--              :src= "tableData[0].imgurl"-->
  <!--              style="-webkit-filter: grayscale(100%);filter: grayscale(100%);"-->
  <!--              class="image"-->
  <!--          />-->
  <!--          <div style="padding: 14px">-->
  <!--            <span>{{ tableData[0].name }}</span>-->
  <!--            <div class="bottom card-header">-->
  <!--              <div class="time">{{ currentDate }}</div>-->
  <!--              <el-button backgroud=" #d1edc4" text class="button" @click="dialogFormVisible = true" v-show="buyButtonFlag" >购买</el-button>-->
  <!--              <el-button color=" #d1edc4" text class="button" @click="dialogFormVisible = true" v-show="!buyButtonFlag" disabled>购买</el-button>-->
  <!--            </div>-->
  <!--          </div>-->
  <!--        </el-card>-->
  <!--      </template>-->
  <!--    </el-skeleton>-->
  <!--  </el-space>-->

  <el-dialog v-model="dialogFormVisible" title="购买" :before-close="close">
    <el-form :model="form">
      <el-form-item label="用户姓名" label-width="140px">
        <el-input v-model="form.user.name" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="电话号码" label-width="140px">
        <el-input v-model="form.user.tele" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="交易时间" label-width="140px">
        <div class="block">
          <span class="demonstration"></span>
          <el-date-picker
              value-format="YYYY-MM-DD HH:mm:ss"
              v-model="form.tradeTime"
              type="datetime"
              placeholder="Select date and time"
          />
        </div>
      </el-form-item>
      <el-form-item label="交易地点" label-width="140px">
        <el-input v-model="form.tradePlace" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="buyGoods">购买</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {ref} from "vue";
import request from "@/utils/request";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Home",
  data() {
    return {
      buyButtonFlag: true,
      loading: ref(false),
      currentDate: new Date().toDateString(),
      tableData: [],
      dialogFormVisible: ref(false),
      form: {
        user: {
          name: '',
          tele: '',
        },
        tradeTime: '',
        tradePlace: '',
      }
    }
  },
  created() {
    this.getGoodsInfo()
  },
  methods: {
    getGoodsInfo() {
      request.get("http://localhost:8082/goods/getGoodsList").then(res => {
        this.tableData = res.data.list;
        console.log(res.data.list[0].imgurl.length);
        if (this.tableData[0].status != 0) {
          this.buyButtonFlag = false;
        } else {
          this.buyButtonFlag = true;
        }
      })
    },
    buyGoods() {
      this.form.goodsId = this.tableData[0].id;
      console.log(this.form.tradeTime);
      request.post("http://localhost:8082/user/buy", this.form).then(res => {
        if (res.flag) {
          this.$message({
            type: 'success',
            message: res.msg
          });
        } else {
          this.$message.error(res.msg);
        }
      }).finally(() => {
            this.dialogFormVisible = false;
            this.getGoodsInfo();
          }
      )
    },
    close() {
      this.dialogFormVisible = false;
      this.form = {
        user: {
          name: '',
          tele: '',
        },
        tradeTime: '',
        tradePlace: '',
      };
    },
  }
}
</script>

<style scoped>
.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #11cd40;
  background-color: rgb(21, 47, 72);
  border-color: rgb(21, 47, 72);
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}
</style>
